<% if (plugins.sponsors) { %>
  <section>
    <h2 class="field">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>
      Sponsor me!
    </h2>
      <% if (plugins.sponsors.error) { %>
        <div class="row fill-width">
          <section>
            <div class="field error">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
              <%= plugins.sponsors.error.message %>
            </div>
          </section>
        </div>
      <% } else { %>
        <% for (const section of plugins.sponsors.sections) { %>
          <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
            <div class="fill-width">
              <section class="sponsors goal">
                <div class="markdown">
                  <%= plugins.sponsors.goal.description %>
                </div>
                <% { const width = 440 * (1 + large) %>
                  <div class="center horizontal-wrap ">
                    <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
                      <mask id="project-bar">
                        <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
                      </mask>
                      <rect mask="url(#project-bar)" x="0" y="0" width="<%= (plugins.sponsors.goal.progress/100)*width %>" height="8" fill="#ec6cb9"/>
                      <rect mask="url(#project-bar)" x="<%= (plugins.sponsors.goal.progress/100)*width %>" y="0" width="<%= ((100-plugins.sponsors.goal.progress)/100)*width %>" height="8" fill="#d1d5da"/>
                    </svg>
                  </div>
                <% } %>
                <div class="goal-text">
                  <span>
                    <% if (plugins.sponsors.count) { %>
                      <%= plugins.sponsors.count %> sponsor<%= plugins.sponsors.count !== 1 ? "s are" : " is" %> funding <%= user.login %>'s work
                    <% } %>
                  </span>
                  <span><%= plugins.sponsors.goal.title %></span>
                </div>
                <div class="row">
                  <% for (const user of plugins.sponsors.list) { %><img class="avatar" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
                </div>
              </section>
            </div>
          <% } else if (section === "about") { %>
            <div class="row fill-width">
              <section class="sponsors">
                <div class="markdown">
                  <%- plugins.sponsors.about %>
                </div>
              </section>
            </div>
          <% } %>
        <% } %>
      <% } %>
  </section>
<% } %>